import React, { useEffect } from 'react';
import { Input, Radio, Select, Row, Col } from 'antd';
import FormItem from 'src/components/FormItem';
import { IS_EXEC_CONDITION, ENABLE_STATUS } from 'src/utils/constant';
import { compare, compareClass } from 'src/utils/compare';
import useProjectData from 'src/hook/useProjectData';
// import useAppProductEventData from 'src/hook/useAppProductEventData';

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};
export default function(props) {
  const projectList = useProjectData();
  // 设置form值
  useEffect(() => {
    if (props.actionType !== 'add') {
      props.form.setFieldsValue({
        name: props.value.name,
        app_id: props.value.app_id || undefined,
        event_id: (props.isImportant ? props.value.event_name : props.value.event_id) || undefined,
        product_id: props.value.product_id || undefined,
        status: props.localSubmit ? 1 : props.value.status || 1,
        remark: props.value.remark,
        strategy_mode: props.value.strategy_mode,
        is_exec_condition:
          props.value.strategy_config &&
          props.value.strategy_config.condition_groups &&
          props.value.strategy_config.condition_groups.length > 0
            ? IS_EXEC_CONDITION._TRUE
            : IS_EXEC_CONDITION._FALSE,
      });
    }
  }, [props.value]);

  const { name, code, app_id, event_id, event_name, product_id, status, remark, mode, is_exec_condition, projectCode } =
    props.value || {};

  // const { items, appId, productId, eventId } = useAppProductEventData({
  //   ...props,
  //   app_id,
  //   event_id,
  //   event_name,
  //   product_id,
  //   layout,
  //   disabled: props.actionType !== 'add',
  //   form: props.form,
  // });

  // useEffect(() => {
  //   props.onGetAppProductEventIds && props.onGetAppProductEventIds({ appId, productId, eventId });
  // }, [appId, productId, eventId]);

  const formItems = [
    {
      label: {
        label: '组件名称',
        ...layout,
      },
      name: 'name',
      options: {
        initialValue: name,
        rules: [
          { required: true, message: '请输入组件名称' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: (
        <Input
          placeholder='请填写组件名称'
          disabled={props.actionType === 'detail'}
          // style={compare(props, 'name')}
        />
      ),
    },
    {
      label: {
        label: '组件CODE',
        ...layout,
      },
      name: 'code',
      options: {
        initialValue: code,
        rules: [
          { required: true, message: '请输入组件CODE' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[a-zA-Z][_a-zA-Z0-9]*$/, message: '限英文数字下划线，并以英文开头' },
        ],
      },
      component: (
        <Input
          placeholder='请填写组件CODE'
          disabled={props.actionType === 'update' || props.actionType === 'detail'}
          // style={compare(props, 'code')}
        />
      ),
    },
    {
      label: {
        label: '组件模式',
        ...layout,
      },
      name: 'mode',
      options: {
        initialValue: mode,
        rules: [{ required: true, message: '请选择组件模式' }],
      },
      component: (
        <Select
          // style={{ width: '100%', ...compare(props, 'strategy_mode') }}
          placeholder='请选择'
          disabled={props.actionType === 'detail'}
          onChange={(value) => props.changeModeHandel && props.changeModeHandel(value)}
        >
          {props.codes &&
            props.codes.strategy_mode &&
            props.codes.strategy_mode.map((it) => {
              return (
                <Select.Option value={it.key} key={it.key}>
                  {it.value}
                </Select.Option>
              );
            })}
        </Select>
      ),
    },
    {
      label: {
        label: '所属项目',
        ...layout,
      },
      name: 'projectCode',
      options: {
        initialValue: projectCode,
        rules: [{ required: true, message: '请选择所属项目' }],
      },
      component: (
        <Select
          // style={{ width: '100%', ...compare(props, 'strategy_mode') }}
          placeholder='请选择'
          disabled={props.actionType === 'detail'}
          onChange={(projectCode) => props.onGetProjectCode && props.onGetProjectCode({ projectCode })}
        >
          {projectList.map((it) => (
            <Select.Option value={it.code} key={it.code}>
              {it.name}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      label: {
        label: '描述',
        ...layout,
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [{ max: 256, message: '最长256个字符' }],
      },
      component: (
        <Input
          placeholder='请输入简短描述，限256字符'
          disabled={props.actionType === 'detail'}
          style={compare(props, 'remark')}
        />
      ),
    },
    // {
    //   label: {
    //     label: '是否启用',
    //     className: '',
    //     ...layout,
    //   },
    //   name: 'status',
    //   options: {
    //     initialValue: status || ENABLE_STATUS._TRUE,
    //     rules: [{ required: true, message: '请选择' }],
    //   },
    //   component: (
    //     <Radio.Group disabled={props.actionType === 'detail'} className={compareClass(props, 'status')}>
    //       <Radio value={ENABLE_STATUS._TRUE}>是</Radio>
    //       <Radio value={ENABLE_STATUS._FALSE}>否</Radio>
    //     </Radio.Group>
    //   ),
    // },
    {
      label: {
        label: '添加限制条件',
        className: '',
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      },
      name: 'is_exec_condition',
      options: {
        initialValue: is_exec_condition || IS_EXEC_CONDITION._FALSE,
        rules: [{ required: true, message: '请选择' }],
      },
      component: (
        <Radio.Group disabled={props.actionType === 'detail'} className={compareClass(props, 'is_exec_condition')}>
          <Radio value={IS_EXEC_CONDITION._TRUE}>是</Radio>
          <Radio value={IS_EXEC_CONDITION._FALSE}>否</Radio>
        </Radio.Group>
      ),
    },
  ].filter(Boolean);

  return (
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col span={8} style={{ minWidth: 300 }} key={item.name}>
            <FormItem {...props} form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
}
